<template>
    <div class="box">
        <header>
            <van-nav-bar title="新建档案" left-arrow @click="onclick" />

        </header>
        <main>
            <van-tabs>
                <van-tab title="基本信息">
                    <div class="x-box">
                        <div class="yu">
                            <p style="padding-top:5px;">与您的关系</p>
                            <div v-for="(item, index) in gx" :key="index">
                                <button @click="btn(item, index)" :class="itemindex === index ? 'gx' : ''">{{ item.name
                                    }}</button>
                            </div>
                        </div>
                        <div class="x-b">
                            <van-cell-group inset>
                                <van-field v-model="name" required label="姓名" placeholder="请输入真实姓名" class="z-name" />
                            </van-cell-group>
                        </div>
                        <div class="x-b">
                            <van-cell-group inset>
                                <van-field v-model="card" required label="身份证号" placeholder="请输入身份证号码" />
                            </van-cell-group>
                        </div>
                        <div class="x-b">
                            <van-cell-group inset>
                                <van-field v-model="date" required label="出生日期">
                                    <template #input>
                                        <div class="pup">
                                            <van-cell @click="showPopup">
                                                <button class="place">请选择</button>
                                            </van-cell>
                                            <van-popup v-model:show="show" position="bottom"
                                                :style="{ padding: '64px' }">
                                                <van-date-picker v-model="currentDate" title="选择日期" :min-date="minDate"
                                                    :max-date="maxDate" />
                                            </van-popup>
                                        </div>
                                    </template>
                                </van-field>
                            </van-cell-group>
                        </div>
                        <div class="x-b">
                            <van-cell-group inset>
                                <van-field v-model="sex" required label="性别">
                                    <template #input>
                                        <div class="nn">

                                            <div v-for="(item, index) in sexs" :key="item.id">
                                                <button @click="sexbtn(item, index)"
                                                    :class="sexindex === index ? 'bg' : ''">{{ item.sex }}</button>
                                            </div>

                                        </div>
                                    </template>
                                </van-field>
                            </van-cell-group>
                        </div>
                        <div class="x-b">
                            <van-cell-group inset>
                                <van-field v-model="tel" required label="联系方式" placeholder="请输入联系方式" />
                            </van-cell-group>
                        </div>
                    </div>

                    <button class="bc" @click="save">保存</button>
                </van-tab>
                <van-tab title="电子病历">

                </van-tab>
            </van-tabs>
        </main>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios';
import { useRouter } from 'vue-router';
import { error } from 'console';
const router = useRouter()
const itemindex = ref(0)
const sexindex = ref(0)
const gx = ref([
    {
        name: '本人'
    },
    {
        name: '配偶'
    },
    {
        name: '父母'
    },
    {
        name: '子女'
    },
    {
        name: '亲戚'
    },
    {
        name: '朋友'
    }
])
const sexs = ref([
    {
        sex: '男'
    },
    {
        sex: '女'
    },
])
const archive = ref({
    relationship: '',
    name: '',
    card: '',
    date: '',
    sex: '',
    tel: ''
})
const minDate = new Date(2000, 0, 1)
const maxDate = new Date(2025, 5, 1)
const currentDate = ref([]);
const show = ref(false);
const showPopup = () => {
    show.value = true;
};
const btn = (item, index) => {
    console.log(item.name, item.id)
    console.log(currentDate.value)
    localStorage.setItem('gx', item.name)
    itemindex.value = index
}
const sexbtn = (item, index) => {
    console.log(item.sex)
    localStorage.setItem('sex', item.sex)
    sexindex.value = index
    console.log(sexindex.value)
}
// 姓名
const name = ref('')
// 身份证号
const card = ref('')
// 出生日期
const date = ref('')
// 性别
const sex = ref('')
// 联系方式
const tel = ref('')
// 保存
const save = () => {
    console.log({
        data: {
            name: name.value,
            card: card.value,
            date: date.value,
            sex: sex.value,
            tel: tel.value
        }
    })
    localStorage.setItem('data', JSON.stringify({
        name: name.value,
        card: card.value,
        date: date.value,
        sex: sex.value,
        tel: tel.value
    }))
    router.push('/pictrue')
}

const onclick = () => {
    router.push('/pictrue');
}



</script>

<style scoped lang="scss">
.box {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;

    header {
        height: 100px;
        // background-color: pink;
    }

    main {
        flex: 1;
        height: 100%;
        overflow-y: scroll;

        .jbxx {
            margin-left: 50px;
            margin-top: 40px;
        }

        .x-box {
            width: 100%;
            height: 800px;
            background-color: #F5F5F5;
            position: absolute;
            // top: 380px;
        }

        .yu {
            width: 92%;
            height: 170px;
            /* position: absolute; */
            background-color: #fff;
            border-radius: 10px;
            margin-left: 4%;
        }

        .yu>p {
            font-size: 30px;
            margin: 20px;
        }

        .yu>div {
            width: 80px;
            height: 80px;
            border: none;
            border-radius: 50%;
            background-color: #D0D0D0;
            color: #fff;
            margin-left: 27px;
            float: left;
        }

        .yu>div>button {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: none;
        }

        .gx {
            background-color: #0070FF;
        }

        .x-b {
            margin-top: 20px;
        }

        .nn {
            margin-left: 220px;
        }

        .nn>div {
            /* display: flex; */
            float: left;
        }

        .nn>div>button {
            width: 80px;
            height: 50px;
            border: 1px solid #ccc;
            background-color: #fff;
            margin-left: 20px;
            border-radius: 5px;
        }

        .bc {
            width: 90%;
            height: 80px;
            background-color: #0070FF;
            color: #fff;
            border: none;
            border-radius: 10px;
            margin-left: 5%;
            position: fixed;
            bottom: 30px;
            font-size: 30px;
        }

        .place {
            border: none;
            background-color: #fff;
            font-size: 30px;
        }

        .pup {
            height: 50px;
            margin-top: -40px;
            margin-left: -30px;
            color: #ADADAD;
        }

        .bg {
            background-color: #0070FF;
        }
    }
}
</style>